<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择框</title>
    <link rel="stylesheet" href="//static/css/bootstrap.min.css">
    <link rel="stylesheet" href="//static/css/index_s.css">
    <link rel="stylesheet" href="//static/css/style.css">
    <link rel="stylesheet" href="//static/css/public.css">
    <!--zTree-->
    <link rel="stylesheet" href="//static/plugins/zTree/zTreeStyle.css">
</head>
<body>

<div id="content" style="padding: 15px;">
    <div class="form-group col-xs-12">
        <input id="company" autocomplete="off" class="form-control" v-model="treeName">
        <ul id="companyTree" class="ztree modalZTree border-all" style="display: none;left: 14px;top: 34px;">
            <li>暂时没有数据,请添加</li>
        </ul>
    </div>
    <div class="form-group col-xs-12">
        <select class="form-control" style="padding: 0 8px;" v-model="character">
            <option value="===请选择===">===请选择===</option>
            <option value="国家机关">国家机关</option>
            <option value="房地产">房地产</option>
            <option value="建筑业">建筑业</option>
            <option value="社会服务业">社会服务业</option>
            <option value="互联网">互联网</option>
            <option value="制造业">制造业</option>
            <option value="金融业">金融业</option>
            <option value="其他业">其他业</option>
        </select>
    </div>
    <div class="form-group col-xs-12">
        <input id="checkSelectInput" class="form-control" v-model="checkSelectName" @click="openSelect()">
        <ul id="checkSelectList" class="modalZTree border-all" style="left: 14px;top: 34px;"
            v-bind:class="{showCheckSelect:showCheckSelect}">
            <li class="selectItemLli" @click="hideCheckSelect()">==请选择==</li>
            <li class="selectItemLli" v-for="(item,index) in checkSelectList" @click="checkSelectClick(item,index)">
                <img class="selectItemImg" :src="'//static/image/checkbox_'+(item.isActive?'1':'0')+'.png'">
                {{item.name}}
            </li>
        </ul>
    </div>
    <div class="form-group col-xs-12">
        <input class="form-control" v-model="modalName" @click="openModalSelect()">
    </div>

    <!--模态-->
    <!--分类管理模态-->
    <div id="selectModal" class="modal fade">
        <div class="modal-dialog" style="width: 900px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">请选择</h4>
                </div>
                <div class="modal-manage" style="height: 500px;">
                    <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 61px;">查询</button>
                    <table id="selectTable"
                           data-toggle="table"
                           data-toolbar=".categoryBar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-show-refresh="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th data-width="50" data-field="id"></th>
                            <th data-field="name">名称</th>
                            <th data-field="code">编号</th>
                            <th data-field="dis_order">排序</th>
                            <th data-width="50" data-field="status" data-align="center" data-formatter="checkBoxFormatter">有效</th>
                            <th data-field="description">备注</th>
                            <th data-width="150" data-formatter="operateCategoryFormatter" data-events="actionCategoryEvents">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
<!-- 主要的脚本 -->
<script src="//static/js/jquery-3.1.1.min.js"></script>
<script src="//static/js/bootstrap.min.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="//static/js/vue.min.js"></script>
<!--zTree-->
<script src="//static/plugins/zTree/jquery.ztree.core.js"></script>
<!--Ztreegrid-->
<script src="//static/plugins/bootstrap-table/bootstrap-table-tree.js"></script>
<!--公共服务插件-->
<script src="//static/js/publicServe.js"></script>
<script>
    var vm = new Vue({
        el: '#content',
        data: {
            character:'',                   //公司性质
            treeLoading:false,              //公司树结构加载判断
            treeName:'===请选择===',//公司树获取到的值
            checkSelectList:[               //多选数据
                {
                    isCheck:false,
                    name:'北京'
                },
                {
                    isCheck:false,
                    name:'天津'
                },
                {
                    isCheck:false,
                    name:'河北省'
                },{
                    isCheck:false,
                    name:'山西省'
                },{
                    isCheck:false,
                    name:'辽宁省'
                },{
                    isCheck:false,
                    name:'吉林省'
                },{
                    isCheck:false,
                    name:'黑龙江省'
                },{
                    isCheck:false,
                    name:'上海'
                },{
                    isCheck:false,
                    name:'江苏省'
                },{
                    isCheck:false,
                    name:'浙江省'
                },{
                    isCheck:false,
                    name:'安徽省'
                },{
                    isCheck:false,
                    name:'福建省'
                },{
                    isCheck:false,
                    name:'江西省'
                },{
                    isCheck:false,
                    name:'山东省'
                },{
                    isCheck:false,
                    name:'河南省'
                },{
                    isCheck:false,
                    name:'湖北省'
                },{
                    isCheck:false,
                    name:'湖南省'
                },{
                    isCheck:false,
                    name:'广东省'
                },{
                    isCheck:false,
                    name:'广西壮族自治区'
                },{
                    isCheck:false,
                    name:'海南省'
                },{
                    isCheck:false,
                    name:'重庆'
                },{
                    isCheck:false,
                    name:'四川省'
                },{
                    isCheck:false,
                    name:'贵州省'
                },{
                    isCheck:false,
                    name:'云南省'
                },
            ],
            checkSelectName:'===请选择===',  //多选框中取到的值
            showCheckSelect:false,          //多选框是否打开
            checkSelectChange:[],           //被选定的select数据
            modalName:'===请选择===',       //模态弹框选择
        },
        created(){
            //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
            this.character='===请选择===';
        },
    });

    //zTree配置
    var setting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: modalZTreeClick
        }
    };
    //列表模态中选择类型 触发zTree
    function modalZTreeClick(event, treeId, treeNode, clickFlag) {
        //为 modalData.parent 赋值
        $("#companyTree").fadeOut("fast");
        vm.treeName = treeNode.name;
    }
    function onBodyDown(event) {
        if (!(event.target.id == "company" ||event.target.id == "companyTree" || $(event.target).parents("#companyTree").length>0)) {
            $("#companyTree").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
    }
    $('#company').click(function () {
        //设定圆度宽度与input宽度一样
        $("#companyTree").outerWidth($('#company').outerWidth());
        $("#companyTree").slideToggle("fast");
        $("body").bind("mousedown", onBodyDown);
    });



    //多选框中定义
    function openSelect() {
        //设定圆度宽度与input宽度一样
        $("#checkSelectList").outerWidth($('#checkSelectInput').outerWidth());
        vm.showCheckSelect = !vm.showCheckSelect;
        if(vm.checkSelectName==''){
            vm.checkSelectName='===请选择===';
        }
    }
    function hideCheckSelect() {
        vm.showCheckSelect = false;
        vm.checkSelectName='===请选择===';
    }
    function checkSelectClick(item) {
        vm.checkSelectName = "";
        //为 modalData.parent 赋值
        Vue.set(item,'isActive',!item.isActive);
        if(item.isActive){
            vm.checkSelectChange.push(item)
        }else{
            var newItem = vm.checkSelectChange.find((v) => {
                return v.name == item.name;
            });
            var newIndex = vm.checkSelectChange.indexOf(newItem);
            vm.checkSelectChange.splice(newIndex,1)
        }
        vm.checkSelectChange.forEach((res)=>{
            vm.checkSelectName+= (res.name+',');
        })
    }
    
    //模态选择框
    function openModalSelect() {
        $("#selectModal").modal('show');
    }


    //dom渲染完成后加载
    $(document).ready(function () {
        //获取zTree结构
        vm.treeLoading = true;
        ajax('http://172.16.202.224:8080/core/organization/get_tree_all/','')
            .then(function (response) {
                if(response && response.success==1){
                    $.fn.zTree.init($("#companyTree"), setting, response.data);
                }
                vm.treeLoading = false;
            })
            .catch(()=>{
                vm.treeLoading = false;
            })
    });
</script>
</body>
</html>